<template>
  <el-dialog title="计算列表" :modelValue="visiable" width="450px" @close="$emit('closed')">
    <div class="w-full h-32 bg-yellow-100 rounded-md font-[consale]">
      <!-- header -->
      <div class="mx-2 pt-2 pb-1 flex justify-between items-center border-b border-gray-300">
        <span class="text-black font-bold">N1-N2 张力架线</span>
        <div class="flex items-center gap-1">
          <span class="text-red-800 opacity-80">已计算</span>
          <el-divider direction="vertical" />
          <el-button link size="small" @click="">
            <Delete theme="outline" size="14" fill="#555" />
          </el-button>
        </div>
      </div>
      <!-- 牵引绳:20 -->
      <div class="px-2 py-1 text-xs text-gray-600">
        <span>牵引绳:20</span>
      </div>

      <!-- 牵引绳:20 -->
      <div class="px-2 py-1 text-xs text-gray-600">
        <span>导引绳:30</span>
      </div>
    </div>
    <div class="w-full h-32 bg-yellow-100 rounded-md mt-2"></div>
  </el-dialog>
</template>

<script setup lang="ts">
import { Delete } from '@icon-park/vue-next'

const { visiable } = defineProps<{ visiable: boolean }>()
const emit = defineEmits(['closed'])
</script>

<style></style>
